<template>
	<view>
		<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
		<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg()"></view>
				<view class="icon setting" @tap="toSetting(1)"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="user.face" @tap="toSetting(2)"></image>
			</view>
			<!-- 昵称 -->
			<view class="right">
				<view class="username" @tap="toSetting(2)">{{user.username}}</view>
				<!-- 粉丝、关注 -->
				<view class="right-bottom">
					<text>我的关注: {{ user.concerns }}</text>
					<text class="spacer"></text>
					<text>我的粉丝: {{ user.fans }}</text>
				</view>
			</view>
		</view>
		<!-- 称号 banner -->
		<view class="VIP" @click="TshowLogoutModal()">
			<view class="img">
				<image src="/static/img/VIP.png"></image>
			</view>
			<view class="title">{{showTitle}}</view>
		</view>
		<!-- 切换称号隐藏窗口 -->
		<view class="Tmodal" :hidden="TshowModal ? false : true" @click="TcancelLogout()">
			<view class="Tmodal-content" @click.stop>
				<view class="achievement" v-for="(item, index) in achievement_list" :key="index">
					<view class="mask" :hidden="judge_cover[index] ? true : false" @click="showAchievement(index)"></view>
					<view class="title" @click="showAchievement(index)">{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 工具栏1 -->
		<view class="order">
			<view class="list">
				<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
					<view class="img">
						<view class="icon" :class="row.icon"></view>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view>
		<!-- 工具栏2 -->
		<view class="toolbar">
			<view class="title"></view>
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
		<!-- 工具栏 -->
		<view class="toolbar" @click="connectAdmin()">
			<view class="title">联系作者</view>
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
		<!-- 工具栏 -->
		<view class="toolbar" @click="goToFeedback()">
			<view class="title">问题反馈</view>
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
		<!-- 工具栏 -->
		<view class="toolbar" @click="signOut()">
			<view class="title">退出登录</view>
		</view>
		<!-- 退出登录隐藏窗口 -->
		<view class="modal" :hidden="showModal ? false : true">
			<view class="modal-content">
				<text>确定退出登录吗？</text>
				<button class="modal-accept" @click="confirmLogout()">确定</button>
				<view class="modal-separate"></view>
				<button class="modal-reject" @click="cancelLogout()">取消</button>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// sessionID: '',
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				showModal: false,
				TshowModal: false,
				showTitle: '冉冉新星',

				judge_cover: [true, true, true, true, false, false, false],
				achievement_list: ['冉冉新星', '购物达人', '评论狂人', '社区名师', '粉丝破千', '单打冠军', '混双冠军'],

				//个人信息,
				user: {
					username: "点击登录",
					face: '/static/head.png',
					integral: 0,
					balance: 0,
					envelope: 0,
					fans: 0,
					concerns: 0,
				},
				// 订单类型
				orderList: [{
						text: '我的成就',
						icon: "fukuan"
					},
					{
						text: '我的关注',
						icon: "fahuo"
					},
					{
						text: '我的粉丝',
						icon: "shouhuo"
					},
					{
						text: '我的帖子',
						icon: "pingjia"
					},
					{
						text: '我的物品',
						icon: "tuihuo"
					}
				],
				// 工具栏列表
				mytoolbarList: [{
						url: '/pagesB/concernposts/concernposts',
						text: '关注帖子',
						img: '/static/img/user/guanzhutiezi.png'
					},
					{
						url: '/pagesB/datinginformation/datinginformation',
						text: '约球信息',
						img: '/static/img/user/yueqiu.png'
					},
					{
						url: '/pagesB/sparringinformation/sparringinformation',
						text: '陪练信息',
						img: '/static/img/user/peilian.png'
					},
					{
						// url: '/pagesA/msg/msg',
						// text: '聊天列表',
						url: '/pagesD/joinus',
						text: '加入我们',
						img: '/static/img/user/liaotian.png'
					},
				]
			}
		},
		mounted() {
			if (wx.getStorageSync('nickName')) {
				this.user.username = wx.getStorageSync('nickName');
				this.user.face = wx.getStorageSync('avatarUrl');
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.statusHeight = 0;
		},
		onReady() {
			//此处，演示,每次页面初次渲染都把登录状态重置

		},
		onShow() {
			if (wx.getStorageSync('nickName')) {
				this.user.username = wx.getStorageSync('nickName');
				this.user.face = wx.getStorageSync('avatarUrl');
			}
			if (wx.getStorageSync('myFansNumber')) {
				this.user.fans = wx.getStorageSync('myFansNumber');
			} else {
				this.user.fans = 0;
			}
			if (wx.getStorageSync('myFollowsNumber')) {
				this.user.concerns = wx.getStorageSync('myFollowsNumber');
			} else {
				this.user.concerns = 0;
			}
		},
		methods: {
			...mapMutations(['setLoginPopupShow', 'setShowWxLogin', 'setLoadingShow']),
			//消息列表
			toMsg() {
				if (!wx.getStorageSync('sessionID')) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				// uni.navigateTo({
				// 	url: '/pagesA/msg/msg'
				// })
			},
			toOrderList(index) {
				if (!wx.getStorageSync('sessionID')) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				console.log('已登录');
				uni.setStorageSync('tbIndex', index);
				if (index == 0) {
					if (getApp)
						uni.navigateTo({
							url: '/pagesB/achievements/myachievements'
						})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pagesA/friends/concerns'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pagesA/friends/fans'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pagesB/myposts/myposts'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/mygoods/mygoods'
					})
				}
			},
			toSetting(index) {
				if (index == 1) {
					// uni.navigateTo({
					// 	url: '/pagesB/setting/setting1'
					// })
				} else if (index == 2) {
					this.setLoginPopupShow(false);
					this.setShowWxLogin(false);
					this.setLoadingShow(false);
					uni.navigateTo({
						url: '/pagesB/setting/setting2'
					})
				}
			},
			toPage(url) {
				if (!wx.getStorageSync('sessionID')) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				console.log(url)
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			connectAdmin() {
				uni.navigateTo({
					url: '/pagesD/admin'
				})
			},
			signOut() {
				this.showLogoutModal();
			},
			confirmLogout() {
				if (wx.getStorageSync('nickName')) {
					// 执行退出登录逻辑
					const sessionID = wx.getStorageSync('sessionID');
					let params = {
						authorization: sessionID
					};
					let queryString = Object.keys(params).map(key =>
						`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
					).join('&');
					uni.request({
						url: 'http://localhost:8081/user/logout/wechat',
						method: 'POST',
						header: {
							"content-type": "application/x-www-form-urlencoded",
							'Access-Control-Allow-Headers': 'appId',
							'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
							'Access-Control-Max-Age': 86400,
							'Authorization': '' + wx.getStorageSync('sessionID')
						},
						data: queryString,
						success: (res) => {
							const name = '点击登录';
							const url = '/static/head.png';

							this.$set(this.user, 'username', name);
							this.$set(this.user, 'face', url);

							wx.clearStorage();
							getApp().globalData.nickName = name;
							getApp().globalData.avatarUrl = url;
							getApp().globalData.sessionID = '';
							console.log("退出登录成功");
							uni.showToast({
								title: '退出登录成功',
								icon: 'none',
								duration: 2000
							});
						},
						fail: (res) => {
							console.log("退出登录失败");
						}
					});
				} else {
					uni.showToast({
						title: '您未登录!',
						icon: 'none',
						duration: 2000
					});
				}
				this.hideLogoutModal();
			},
			cancelLogout() {
				this.hideLogoutModal();
			},
			showLogoutModal() {
				this.showModal = true;
			},
			hideLogoutModal() {
				this.showModal = false;
			},
			TchooseAchievement() {
				this.TshowLogoutModal();
			},
			TcancelLogout() {
				this.ThideLogoutModal();
			},
			TshowLogoutModal() {
				if (!wx.getStorageSync('sessionID')) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				this.TshowModal = true;
			},
			ThideLogoutModal() {
				this.TshowModal = false;
			},
			showAchievement(index) {
				if (this.judge_cover[index] == true) {
					this.showTitle = this.achievement_list[index];
					uni.showToast({
						title: '切换成功!',
						icon: 'none',
						duration: 2000
					});
					this.TcancelLogout();
				} else {
					uni.showToast({
						title: '您未获取该称号!',
						icon: 'none',
						duration: 2000
					})
				}
			},
			goToFeedback() {
				if (!wx.getStorageSync('sessionID')) {
					uni.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				uni.navigateTo({
					url: '/pagesD/feedback'
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #f06c7a;
		top: 0;
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		background-color: #f06c7a;

		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-color: #f06c7a;
		height: 100upx;
	}

	.place-bottom {
		height: 30upx;
	}

	.spacer {
		margin-right: 5px;
	}

	.user {
		width: 92%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		background-color: #f06c7a;
		padding-bottom: 120upx;

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

		}

		.right {
			// width: 100%;
			display: flex;
			flex-direction: column;
			/* 将元素垂直排列 */
			justify-content: center;
			align-items: flex-start;
			height: 10vh;

			.username {
				font-size: 36upx;
				color: #fff;
			}

			.right-bottom {
				margin-top: 20upx;
				color: #fff;
				font-size: 28upx;
			}
		}

	}

	.order {
		width: 84%;
		margin: 30upx 4% 30upx 4%;
		padding: 30upx 4% 20upx 4%;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.list {
			display: flex;
			border-bottom: solid 1upx #17e6a1;
			padding-bottom: 10upx;

			.box {
				width: 20%;

				.img {
					width: 100%;
					display: flex;
					justify-content: center;

					.icon {
						font-size: 50upx;
						color: #464646;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}

		.balance-info {
			display: flex;
			padding: 10upx 0;

			.left {
				width: 75%;
				display: flex;

				.box {
					width: 50%;
					font-size: 28upx;

					.num {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #f9a453;
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						color: #3d3d3d;
						font-size: 28upx;
					}
				}
			}

			.right {
				border-left: solid 1upx #17e6a1;
				width: 25%;

				.box {

					.img {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;

						.icon {
							font-size: 45upx;
							color: #e78901;
						}
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 28upx;
						color: #3d3d3d;
					}
				}
			}
		}
	}

	.VIP {
		width: 84%;
		margin: -65upx auto 20upx auto;
		padding: 30upx 4%;
		background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
		border-radius: 15upx;
		display: flex;
		align-items: center;

		.img {
			flex-shrink: 0;
			width: 60upx;
			height: 60upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}

		.title {
			margin-left: 10upx;
			width: 100%;
			color: #796335;
			font-size: 30upx;
		}

		.tis {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			color: #fcf0d0;
			font-size: 26upx;
		}
	}

	.toolbar {
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 20upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 30upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 25%;
				margin-bottom: 30upx;

				.img {
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;

					image {
						width: 9vw;
						height: 9vw;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.modal-separate {
			height: 20upx;
		}

		.modal-content {
			background-color: #fff;
			padding: 30px;
			border-radius: 15px;
			text-align: center;

			.modal-accept {
				width: 200upx;
				height: 80upx;
			}

			.modal-reject {
				width: 200upx;
				height: 80upx;
			}
		}
	}

	.Tmodal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.Tmodal-content {
			position: relative;

			width: 500upx;
			height: 1000upx;
			background-color: #fff;
			padding: 30px;
			border-radius: 15px;
			text-align: center;

			.achievement {
				top: -3%;
				position: relative;
				left: 9%;
				margin-top: 40rpx;
				width: 75%;
				padding: 30upx 4%;
				background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
				box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
				border-radius: 15upx;
				display: flex;
				align-items: center;

				.title {
					position: relative;
					margin-left: 10upx;
					width: 100%;
					color: #796335;
					font-size: 40upx;
					text-align: center;
				}
			}

			.mask {
				position: absolute;
				left: 0;
				border-radius: 15upx;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 1;
			}
		}
	}
</style>